<% include header_index.html %>


<style>

    .header{
        width: 100vw;
        background: white;
        box-shadow:0 10px 100px black
    }
    .header_div{
        width: 355px;
        margin: 0 auto;
    }
    .header_div img{
        width: 20px;
        height:20px;
        margin-top: 12px;
    }
    .header_div p{
        font-size: 15px;
        color: #181818;
        line-height: 44px;
        text-align: center;
    }

    body{
        background: rgb(243,243,243);
    }

    .member_logo_div{
        height:60px;
        background: white;
        width: 100vw;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .member_id_div,.safe_div,.area_div,.jd_div,.zipcode_div,.birthday_div,.sex_div{
        height:44px;
        background: white;
        width: 100vw;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .title_left{
        font-size: 15px;
        color: #454545;
        text-indent: 10px;
        float: left;
        line-height:44px;
    }
    .title_right{
        font-size: 15px;
        color: #454545;
        height:44px;
        text-indent: 10px;
        float:right;
        line-height:44px;
    }
    .member_logo_div p{
        line-height: 60px !important;
    }
    .hide1{
        width: 327px;
        float: left;
        height: 44px;
        overflow: hidden;
    }
    .hide{
        width: 100vw;
        overflow:hidden;
        overflow: scroll;
        height:44px;
    }
    .pd10{
        padding-right: 10px;
    }
    .member_logo_img{
        width: 44px;
        height:44px;
        margin: 8px;
    }
    .mt10{
        margin-top: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    #my-input{
        height:44px;
        border: none;
        text-align: right;
        font-size: 15px;
        color: #454545;
    }
    #ssx,#address,#zip_code{
        height:43px;
        font-size: 15px;
        color: #454545;
        border: none;
        text-align: right;
    }
    input,textarea{outline:none;}
</style>

<script src="images/default_wap/picker.js"></script>
<script src="images/default_wap/picker-city.js"></script>
<div class="big_div">
    <div class="h44 header">
        <div class="header_div h44">
            <img src="images/default_wap/return.png" class="back fl" alt="">
            <img src="images/default_wap/moreblack.png" class="back fr" alt="">
            <p>
                个人资料
            </p>
        </div>
    </div>

    <div class="member_logo_div">
        <p class="title_left">头像</p>
        <div class="value_rig"><p class="title_right pd10">></p><p class="title_right"><img class="member_logo_img" src="images/default_wap/load.png" v-bind:data-src="'http://www.phmall.com.ph/union/'+img" alt="" @click="upload()"></p></div>
        <form action="upload/logo_upload"  enctype="multipart/form-data" method="post" style="display: none">
        <input type="file" name="thumbnail" class="chose"  @change="change()">
            <input type="submit" class="sub">
        </form>
    </div>
    <div class="member_id_div">
        <p class="title_left">用戶ID</p>
        <p class="title_right pd10">{{id}}</p>
    </div>


    <div class="safe_div mt10 mb10">
        <a href="member_safe">
            <p class="title_left">账户与安全</p>
            <p class="title_right pd10">></p>
        </a>
    </div>

    <div class="area_div">
        <p class="title_left">地区</p>
        <p class="title_right pd10"><input class="weui_input pd10" type="text" v-bind:value="area" id='ssx'/>
            ></p>
    </div>
    <div class="jd_div">
        <p class="title_left">街道</p>
        <p class="title_right pd10"> <input class="weui_input pd10" type="text" v-bind:value="address" id='address'/>></p>
    </div>
    <div class="zipcode_div">
        <p class="title_left">邮编</p>
        <p class="title_right pd10"> <input class="weui_input pd10" type="text" v-bind:value="zip_code" id='zip_code'/>></p>
    </div>


    <div class="sex_div mt10">
        <p class="title_left">性别</p>
        <p class="title_right pd10">></p>
        <p class="title_right pd10">{{sex}}</p>
    </div>
    <div class="birthday_div mt10">
        <p class="title_left">出生日期</p>
        <p class="title_right pd10">></p>
        <p class="title_right pd10"><input type="text" v-bind:value="birthday"  id="my-input" data-toggle='date' /></p>
    </div>
</div>

<script>
    var page = new Vue({
        el: '.big_div',
        data: {
            img:'',
            id:'',
            sex:'',
            birthday:'',
            eare:'',
            address:'',
            zip_code:""
        },
        methods:{
            upload:function () {
                $('.chose').trigger('click');
            },
            change:function () {
                $('.sub').trigger('click');
            }
        }
    });

    $.post("/member_data",{},function (result) {
        result=result.data;
        page.img=result["0"].member_image;
        page.id=result[0].member_id;
        page.sex=result["0"].member_sex==1?'男':'女';
        page.birthday=result["0"].member_birthday;
        var area='';
        area=result["0"].province+" "+result[0].city+" "+result[0].county;
        page.area=area;
        page.address=result[0].member_address;
        page.zip_code=result[0].member_zip;
    });


    $(".sex_div").find('.title_right').click(function () {
        $.actions({
            actions: [
                {
                    text:'男',
                    onClick: function(){
                        $.post('/member_data/edit',{key:'s',val:1},function (result) {
                            result=result.data;
                            page.sex='男';
                            $.toptip('操作成功', 'success');
                        });
                    }
                },
                {
                    text:'女',
                    onClick: function(){
                        $.post('/member_data/edit',{key:'s',val:0},function (result) {
                            result=result.data;
                            page.sex='女';
                            $.toptip('操作成功', 'success');
                        });

                    }
                }
            ],
            buttonCancel: "取消"
        });
    });

    $("#my-input").calendar({
        onClose:function (p) {

            var time=parseInt((p.value["0"])/1000);
            $.post('/member_data/edit',{key:'b',val:time},function (result) {
                result=result.data;
                $.toptip('操作成功', 'success');
            });
    }
    });


    $('#address').focusout(function () {
       if($(this).val().length>0)
       {
           $.post('/member_data/edit',{key:'a',val:$(this).val()},function (result) {
            result=result.data;
               $.toptip('操作成功', 'success');
           });
       }
    });

    $('#zip_code').focusout(function () {
        if($(this).val().length>0)
        {
            $.post('/member_data/edit',{key:'z',val:$(this).val()},function (result) {
                result=result.data;
                $.toptip('操作成功', 'success');
            });
        }
    });

    $(function() {

        $("#ssx").cityPicker({
            title: "选择省市县",
            onClose:function (p) {
                var s=p.value;
                $.post('/member_data/edit',{key:'p',val:s[0]},function (result) {
                    result=result.data;
                    $.toptip('操作成功', 'success');
                });
                $.post('/member_data/edit',{key:'c',val:s[1]},function (result) {
                    result=result.data;
                    $.toptip('操作成功', 'success');
                });
                $.post('/member_data/edit',{key:'cc',val:s[2]},function (result) {
                    result=result.data;
                    $.toptip('操作成功', 'success');
                });
            }
        });
    });
</script>






<!--底部栏-->
<% include footer.html %>
